<template>
  <div class="top">
    <div class="top-left">
      <span> Pinia-demonstration </span>
      <img src="../../assets/logo.png" alt="logo" />
    </div>
    <div class="top-right">
      <n-button
        text
        tag="a"
        href="https://gitee.com/MTrun/pinia-demonstration"
        target="_blank"
        size="large"
      >
        <template #icon>
          <n-icon>
            <GitBranchSharp />
          </n-icon>
        </template>
        Gitee
      </n-button>
      <div class="top-right-naive" @click="toNaive">
        <span>Naive UI</span>
        <img src="../../assets/naivelogo.png" alt="logo" />
      </div>
    </div>
  </div>
</template>

<script>
import { GitBranchSharp } from '@vicons/ionicons5'
export default {
  components: {
    GitBranchSharp
  },
  setup() {
    const toNaive = () => {
      window.open('https://www.naiveui.com/zh-CN/light', '_blank')
    }
    return { toNaive }
  }
}
</script>

<style lang="scss" scoped>
.top {
  display: flex;
  justify-content: space-between;
  color: #138448;
  padding: 0 20px;
  height: 60px;
  font-size: 20px;
  line-height: 60px;
  .top-right,
  .top-left {
    img {
      position: relative;
      margin-left: 10px;
      top: 5px;
      height: 25px;
      width: auto;
    }
  }
  .top-right {
    display: flex;
    align-items: center;
    font-size: 16px;
    &-naive {
      cursor: pointer;
      margin-left: 25px;
    }
  }
}
</style>
